<template>
    <div class="exam-cell">
        <div class="exam-cell__head">
            <div class="exam-cell__status">
                <Icon type="md-person" :size="16" />
                <span>{{one.paperNum}}</span>
            </div>
            <div class="exam-cell__title">{{one.paperName}}</div>
        </div>
        <div class="exam-cell__content clearfix">
            <div class="exam-cell__info">
                <p>
                    <span>总题量：</span>
                    <span>{{one.totalNum}}</span>
                </p>
                <p>
                    <span>总分：</span>
                    <span>{{one.scores}}</span>
                </p>
                <p>
                    <span>答题时长：</span>
                    <span>{{one.totalTime}}</span>
                </p>
            </div>
            <div class="exam-cell__info">
                <p>
                    <span>选择题：</span>
                    <span>{{one.singleChoiceNum+one.multipleChoiceNum}}</span>
                </p>
                <p>
                    <span>填空题：</span>
                    <span>{{one.blankNum}}</span>
                </p>
                <p>
                    <span>判断题：</span>
                    <span>{{one.judgeNum}}</span>
                </p>
                <p>
                    <span>案例分析题：</span>
                    <span>{{one.analysisNum}}</span>
                </p>
            </div>
            <div class="exam-cell__info">
                <p>
                    <span>创建时间：</span>
                    <span>{{one.createTime}}</span>
                </p>
                <p>
                    <span>创建人：</span>
                    <span>{{one.creator}}</span>
                </p>
            </div>
            <div class="exam-cell__btns" v-if="showBtns">
                <Button @click.stop="handleEdit" type="primary">编辑</Button>
                <Button @click.stop="handleDelete" type="warning">删除</Button>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    props: {
        value: {
            type: Object,
            default: () => {}
        },
        showBtns: {
            type: Boolean,
            default: false
        },
        one: {
            type: Object,
            default: () => {}
        }
    },
    methods: {
        handleEdit () {
            this.$emit('on-edit', [this.one.paperId, this.one.paperName, this.one.totalTime])
        },
        handlePush () {
            this.$emit('on-push')
        },
        handleDelete () {
            this.$emit('on-delete', this.one.paperId)
        }
    }
}
</script>
<style lang="less" scoped>
.exam-cell {
    & + & {
        margin-top: 15px;
    }
    border: 1px solid #ccc;
    &__head {
        background-color: #f5f7f9;
        position: relative;
        padding: 6px 20px;
        line-height: 28px;
    }
    &__content {
        padding: 20px;
        position: relative;
    }
    &__title {
        font-size: 16px;
        font-weight: 700;
        margin-right: 80px;
    }
    &__status {
        float: right;
    }
    &__info {
        padding-right: 10px;
        & + .exam-cell__info {
            margin-top: 10px;
        }
        p{
            width: 20%;
            display: inline-block;
            vertical-align: top;
        }
    }
    &__btns {
        position: absolute;
        right: 20px;
        bottom: 20px;
        .ivu-btn + .ivu-btn {
            margin-left: 10px;
        }
    }
}
</style>
